<template>
  <el-card>
    <template #header>
      <el-button type="primary" :icon="Plus">添加</el-button>
    </template>
    
    <el-table :data="trademarkList" border class="mb-10">
      <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="品牌名称" prop="tmName"></el-table-column>
      <el-table-column label="品牌LOGO" prop="logoUrl">
        <template #default="{ row, $index }">
          <img :src="row.logoUrl" style="width: 80px;height: 80px;">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="warning" :icon="Edit">编辑</el-button>
          <el-button type="danger"  :icon="Delete">删除</el-button>
          <!-- <el-button size="small" type="warning" :icon="Edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger"  :icon="Delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </el-card>
</template>

<script setup lang="ts">
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import trademarkApi, { type TrademarkList } from '@/api/trademark'
import { ElMessage } from 'element-plus';


// table展示的数据
const trademarkList = ref<TrademarkList>([])
// 获取分页列表数据
const getPage = async () => {
  try {
    let result = await trademarkApi.getPage(page.value, limit.value)
    console.log('品牌分页的数据', result);

    trademarkList.value = result.records;

    total.value = result.total; 

  } catch (error) {
    ElMessage.error('获取品牌分页数据失败,请重试')
  }
}

// 挂载页面的时候初始化数据
onMounted(() => {
  getPage();
})


const page = ref(1) // 当前页
const limit = ref(3) // 每页条数
const total = ref(0) // 总条数
// 每页条数改变的回调
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  limit.value = val
  getPage()
}
// 翻页的回调
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  page.value = val
  getPage()
}
</script>

<style scoped>

</style>